!(function () {

	// 包含全体点的容器
	var tagDot = document.getElementsByClassName("dot-container")[0]
		// 创建按钮的容器
		,
		buttonParent = document.getElementsByClassName("button")[0]
		// 移动的大容器
		,
		tagMoveContainer = document.getElementsByClassName("contain")[0]
		// 索引和标志
		,
		itemIndex = -1
		// 本质是判断，鼠标是否在button上面。去除这个判断会导致，鼠标从外部移入的第一次跳转跳两个页面
		,
		buttonFlag = 0
		// 定时器的标志。有些时候需要清除定时器
		,
		runflag = 0
		// 图片的长度
		,
		imgWidth = 600
		// 图片的数量，抽象起来的话就是容器容纳的个数
		,
		containerNum = document.getElementsByTagName("img").length
		// 判断向前还是向后
		,
		directionFlag = 0
		// 取得具体的容器，这和最开始的容器不能互换，因为我是监听事件，大容器里有很多小容器
		,
		tagContainer = document.getElementsByClassName("container")[0]
		// 第一次加载的时候不移动
		,
		firstFlag = 0;
	// 判断有没有这个类
	function hasClass(el, className) {
		if (el && el.className !== void 0) {
			var classList = el.className.split(/\s+/);
			if (classList.indexOf(className) >= 0) {
				return true;
			} else return false;
		} else {
			return false;
		}
	}

	// 删除这个类
	function deleteClass(el, className) {
		if (hasClass(el, className)) {
			var classList = el.className.split(/\s+/);
			var deleteIndex = classList.indexOf(className);
			classList.splice(deleteIndex, 1);
			el.className = classList.join(' ');
		} else {
			return;
		}
	}

	// 添加这个类
	function addClass(el, className) {
		if (hasClass(el, className)) {
			return false;
		} else {
			var classList = el.className.split(/\s+/);
			classList.push(className);
			el.className = classList.join(" ");
		}
	}

	// 清空所有的active类
	function mapRemove(sameEl, className) {
		var tagEl = document.getElementsByClassName(sameEl);
		for (var i = 0, j = tagEl.length; i != j; i++) {
			deleteClass(tagEl[i], className);
		}
	}

	// 删除所有的active并给当前增加
	function setActive() {
		mapRemove("dot", "active");
		var index = itemIndex;
		// index等于5说明是第六张，这个时候要等同于给第一张设置active
		if (index === 5) {
			index = 0;
		}
		var tag = document.getElementsByClassName("dot")[index];
		addClass(tag, "active");
	}

	//取得css样式
	function getStyle(element, attr) {
		// 前者是现代浏览器支持的方法，后面是ie
		return element.currentStyle ? element.currentStyle[attr] : window.getComputedStyle(element, null)[attr] || 0;
	}

	// 索引加一
	function addItermIndex() {
		itemIndex++;
		if (itemIndex > 5) {
			itemIndex = 0;
		}
	}

	// 索引减一
	function cutItermIndex() {
		itemIndex--;
		if (itemIndex < 0) {
			itemIndex = 5;
		}
	}

	// 清除定时器
	function myClear(flag) {
		if (flag) {
			clearTimeout(flag);
		}
	}

	// 求出目标距离并跳转加活跃类
	function moveAndAdd() {
		var tagpos = -(itemIndex) * imgWidth;
		moveTo(tagpos);
		setActive();
	}

	// 对dot绑定点击事件。清空所有active，然后对特定的绑定active
	function bindDot() {
		tagDot.addEventListener("click", function (e) {
			myClear(runflag);
			var target = e.target;
			if (hasClass(target, "dot")) {
				// 相同就不进行改变
				if (itemIndex === parseInt(target.dataset.index)) {
					return;
					// 最后向前跳的时候，如果是第一页，那么不应该变化，并且吧位置归0
				} else if (itemIndex  === 5) {
					if (itemIndex - parseInt(target.dataset.index) === 5) {
						tagMoveContainer.style.left = 0 + 'px';
						itemIndex = 1;
						// 如果是第二页，那么就让他从第一页开始
					} else if (parseInt(target.dataset.index) === 1) {
						tagMoveContainer.style.left = 0 + 'px';
						itemIndex = 1;
						moveAndAdd();
					} else {
						itemIndex = parseInt(target.dataset.index);
						moveAndAdd();
					}
					
				} else {
					itemIndex = parseInt(target.dataset.index);
					moveAndAdd();
				}
			} else {
				return;
			}
		});
	}

	// 对前后按钮绑定点击事件
	function bindButton() {
		buttonParent.addEventListener("click", function (e) {
			myClear(runflag);
			var target = e.target;
			if (target.className === "up") {
				// 因为每次鼠标移入的时候其实itemindex已经加1了。也就是，如果我一直在按钮上面点的话，只需要减一次，如果是从外部移到按钮上面的话，需要减少两次，这里的buttonFlag就是标志位，我每次鼠标移出的时候buttonFlag就置1，移入的时候就清零
				if (buttonFlag === 0) {
					cutItermIndex();
				} else {
					// cutItermIndex();
					cutItermIndex();
					buttonFlag = 0;
				}
			} else if (target.className === "down") {
				// 这个和向前按钮同理，如果已经加一了，就不变，否则索引加1.
				if (buttonFlag === 0) {
					addItermIndex();
				} else {
					buttonFlag = 0;
				}
			} else {
				return;
			}
			if (itemIndex === 0) {
				if (directionFlag === 0) {
					tagMoveContainer.style.left = 0 + 'px';
					itemIndex = 1;
				}
			}
			if (itemIndex === (containerNum - 1)) {
				if (directionFlag === 1) {
					tagMoveContainer.style.left = (-(containerNum - 1) * imgWidth) + 'px';
					// 因为会自动加1
					itemIndex = containerNum - 2;
				}
			}
			moveAndAdd();
		});
	}

	// 鼠标暂停
	function mousehover() {
		tagContainer.addEventListener("mouseenter", function () {
			buttonFlag = 0;
			myClear(runflag);
		});
		tagContainer.addEventListener("mouseleave", function () {
			buttonFlag = 1;
			run();
		});
		var up = document.getElementsByClassName("up")[0];
		up.addEventListener("mouseenter", function () {
			directionFlag = 1;
		});
		up.addEventListener("mouseleave", function () {
			directionFlag = 0;
		});
	}

	// 绑定函数
	function bindEvent() {
		bindDot();
		bindButton();
		mousehover();
	}

	// 执行绑定事件
	bindEvent();

	// 运动函数
	function moveTo(endPos) {
		var element = tagMoveContainer;
		myClear(element.move);
		var startPos = parseInt(getStyle(element, "left"));
		if (startPos === endPos) {
			return true;
		}
		if (startPos < endPos) {
			startPos += 10;
		}
		if (startPos > endPos) {
			startPos -= 10;
		}
		element.style.left = startPos + 'px';
		element.move = setTimeout(function () {
			moveTo(endPos);
		}, 1);
	}

	// 运动
	function run() {
		addItermIndex();
		moveAndAdd();
		if (itemIndex === 0) {
			tagMoveContainer.style.left = 0 + 'px';
			if (directionFlag === 0 && firstFlag === 1) {
				itemIndex = 1;
				moveAndAdd();
			}
			firstFlag = 1;
		}
		// addItermIndex();
		runflag = setTimeout(run, 3000);
	}
	// 执行
	run();
})();